<template>
  <!-- 站长介绍 -->
  <div class="myself">
    <div class="back">
      <img :src="backIntro" />
    </div>
    <div class="main">
      <!-- 头像 -->
      <img class="avatar" :src="avatarUrl" />
      <!-- 信息 -->
      <div class="info">
        <p class="owner" v-text="owner"></p>
        <p class="motto" v-text="motto"></p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
    data() {
        return {
            backIntro: 'http://image.tinx.top/background.jpg',
            avatarUrl: 'http://image.tinx.top/cat.JPG',
            owner: '隔壁的老王',
            motto: '笃志，励前行。'
        }
    },
}
</script>

<style lang="less" scoped>
.myself {
  padding-bottom: 28px;
  border-bottom: 1px solid #f6f6f6;
  .back {
    img {
      width: 100%;
      height: 120px;
    }
  }
  .main {
    .avatar {
      position: relative;
      top: -50px;
      left: 50%;
      transform: translateX(-50%);
      padding: 4px;
      background-color: #f6f6f6;
      height: 80px;
      width: 80px;
      border-radius: 50%;
    }
    .info {
      .owner {
        margin-top: -50px;
        font-weight: bold;
      }
      .motto {
        color: #878d99;
        font-size: 14px;
      }
      p {
        text-align: center;
      }
    }
  }
}
</style>
